import Base from "../base.js";
import IndentApi from "../../api/indent.js";

export default class extends Base {
    data = {
        rows: []
    }
    render() {
        this.$el.html(`
        <h1>查询用户订单</h1>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="" autocomplete="off" class="layui-input" style="width:300px">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="get">确定</button>
                </div>
            </div>
        </form> 
        <table id="demo" lay-filter="test"></table>
        `);
        this.formEle = layui.form;
        this.tableEle = layui.table;
    }
    rerender() {
        //第一个实例
        this.tableEle.render({
            elem: '#demo'
            , cols: [[ //表头
                { field: '_id', title: 'ID', fixed: 'left' }
                ,
                {
                    field: 'userNameId', title: '用户名',
                    templet: (res) => {
                        let usersNameId = res.usersNameId?.userName || ""
                        return usersNameId
                    }
                },
                , {
                    field: 'movieId', title: '电影', templet: (res) => {
                        let movieId = res.movieId
                        return movieId?.cname ? movieId.cname : ""
                    }
                }
                , {
                    field: 'cinemasId', title: '影院', templet: (res) => {
                        let cinemasId = res.cinemasId
                        return cinemasId?.name ? cinemasId.name : ""
                    }
                }
                , {
                    field: 'theatersId', title: '放映厅', templet: (res) => {
                        let theatersId = res.theatersId
                        return theatersId?.name ? theatersId.name : ""

                    }
                }

                , { field: 'showTime', title: '放映时间', templet: (res) => {
                    let schedulesId = res.schedulesId
                    return `${schedulesId?.date ? schedulesId.date : "" } ${schedulesId?.showTime ? schedulesId.showTime : "" } `

                } }
                ,  {
                    field: '_id',
                    title: '座位选号',
                    templet: (res) => {
                      let seatingId = res.seatingId
                      console.log(seatingId);
                        return `${seatingId.row }排 ${seatingId.col } 号`
                    }
                  },
                , {
                    field: 'schedulesId',
                    title: '价格',
                    fixed: 'left',
                    templet: (res) => {
                      return res.schedulesId.price
                    }
                  }

            ]]
        });

        this.tableEle.reload('demo', {
            data: this.data.rows,
        });


    }
    handle() {
        this.formEle.on('submit(get)', (data) => {
           
            IndentApi.getIndentOne(data.field).then(res => {
                console.log(data.field);
                this.data.rows = res;
                console.log(this.data.rows);
                this.rerender();
            })
            return false;
        });
    }

}
